<template>
  <a-table
    :columns="columns"
    :data-source="data"
    @resizeColumn="handleResizeColumn"
    :pagination="pagination"
    bordered
    class="adjust-table"
  >
    <slot></slot>
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'operations'">
        <div class="operations-style">
          <div>
            <a-typography-link @click="editFunc(record)"
              >编辑</a-typography-link
            >
          </div>
          <div>
            <a-popconfirm
              title="是否删除?"
              @confirm="deleteFunc(record.id)"
              :getPopupContainer="(triggerNode:any) => {return triggerNode.parentNode}"
            >
              <a>删除</a>
            </a-popconfirm>
          </div>
        </div>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts">
export default {
  name: "ProjectTypeTable",
};
</script>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import type { TableColumnsType } from "ant-design-vue";
// import { totalmem } from 'os';
import { defineComponent, ref } from "vue";

const props = defineProps({
  columns: [] as any[],
  data: [] as any[],
  pagination: {} as any,
});
const handleResizeColumn = (w: any, col: any) => {
  col.width = w;
};

const editFunc = (record: any) => {};
const deleteFunc = (record: any) => {};
</script>

<style lang="less" scoped>
.operations-style {
  display: flex;
  justify-content: space-between;

  :deep(.ant-popover-buttons) {
    display: flex;
  }
}
.adjust-table {
  :deep(.ant-table-thead) {
    tr {
      th {
        color: #909399 !important;
        font-weight: 500 !important;
        background: #f5f7fa !important;
      }
    }
  }
}
</style>